<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img {
        width: 100px;
    }
</style>

<body>
    <div class="box">

    </div>

    <p>总价:0</p>

    <button onclick="zjj()">结算</button>

    <div class="aa">
        <h2>已勾选商品</h2>
        <div class="bb">

        </div>
    </div>

</body>

<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script>
    var a = JSON.parse(localStorage.getItem('name'))
    console.log(a);

    function pally() {
        $('.box').html(``)
        $('.box').append(`
            <div>
            <h4>名字:${a.name}</h4>
             <h4>价格:${a.price}</h4>
              <input type="checkbox" onclick="xq()">
            <img src="${a.img}">
            <button onclick="add(${a.id})">+</button> <span>${a.num}</span> <button onclick="jj(${a.id})">-</button>
             </div>
            `)
    }
    pally()

    function xq() {
        var input = $('input').prop("checked")
        if (input == true) {
            console.log(111);
            $('.bb').append(`
            <div>
            <h4>名字:${a.name}</h4>
             <h4>价格:${a.price}</h4>
            <img src="${a.img}">
             </div>
            `)
        } else if (input == false) {
            $('.bb').html(``)
        }
    }


    var zj

    function jz() {
        zj = 0
        zj += a.num * a.price
        $('p').html(`
    <p>总价：${zj}</p>`)
    }

    function add() {
        if (a) {
            $("span").html(`${a.num++ }`)
            jz()
        }
        pally()
    }

    function jj() {
        if (a && a.num > 1) {
            $("span").html(`${a.num--}`)
            jz()
        }
        pally()
    }

    var arr2 = []

    function zjj() {
        var input = $('input').prop("checked")
        if (input == true) {
            arr2.push(a)
            localStorage.setItem('sp', JSON.stringify(arr2))
            localStorage.setItem('zj', zj)

            location.assign('./结束.html')
        }
    }
</script>

</html>